<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商管理</title>
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/supplierManagement.css">
    <link rel="stylesheet" href="../css/element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../css/element-ui/lib/index.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/echarts.js"></script>
</head>

<body>
    <div id="app">
        <div class="item">
            <div class="itemTop">
                <h3>供应商管理</h3>
                <div>
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogVisible1 = true">添加
                    </el-button>
                    <!-- 添加弹出框 -->
                    <el-dialog title="添加供应商" :visible.sync="dialogVisible1" width="50%">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline"
                                    label-width="100px">
                                    <el-form-item class="aa" label="供应商名称" prop="supplier">
                                        <el-input size="mini" v-model="ruleForm.supplier" placeholder="请输入...">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item class="aa" label="联系人" prop="name">
                                        <el-input size="mini" v-model="ruleForm.name" placeholder="请输入..."></el-input>
                                    </el-form-item>
                                    <el-form-item class="aa" label="网址">
                                        <el-input size="mini" v-model="ruleForm.website" placeholder="请输入...">
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <el-col :span="12">
                                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline"
                                    label-width="100px">
                                    <el-form-item class="aa" label="企业类型" prop="type">
                                        <el-select size="mini" v-model="ruleForm.type" placeholder="请选择">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item class="aa" label="联系电话" prop="telephone">
                                        <el-input size="mini" v-model="ruleForm.telephone" placeholder="请输入...">
                                        </el-input>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                        <el-form :model="ruleForm" ref="ruleForm" class="demo-form-inline" label-width="100px">
                            <el-form-item class="" label="企业地址">
                                <el-input size="mini" v-model="ruleForm.address" placeholder="请输入..."></el-input>
                            </el-form-item>
                            <el-form-item class="aa" label="企业logo">
                                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item class="aa" label="企业简介">
                                <el-input type="textarea" :rows="4" v-model="ruleForm.briefIntroduction"
                                    placeholder="请输入...">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button size="mini" @click="dialogVisible1 = false">取 消</el-button>
                            <el-button size="mini" type="primary" @click="dialogVisible1 = false">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="upd()">修改</el-button>
                    <el-button type="primary" icon="el-icon-delete" size="mini" @click="del()">删除</el-button>
                    <el-button type="primary" icon="el-icon-download" size="mini">导入</el-button>
                    <el-button type="primary" icon="el-icon-upload2" size="mini">导出</el-button>
                </div>
            </div>

            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                @selection-change="handleSelectionChange" :default-sort="{prop: 'num', order: 'descending'}"
                :header-cell-style="{background:'#f4f3f9'}">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="供应商" sortable width="250px">
                    <template slot-scope="scope">
                        <span :class="'box'+scope.row.ranking">{{scope.row.ranking}}</span>
                        <span class="actionSupplier" @click="openDrawer(scope.row)">{{scope.row.supplier}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="num" label="供应设备数" sortable width="160px">
                </el-table-column>
                <el-table-column label="质保中产品量" sortable width="130px">
                    <template slot-scope="scope">
                        <span>{{scope.row.warrantyQuantity+'('+scope.row.warrantyQuantitys+')'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="过质保期产品量" sortable width="150px">
                    <template slot-scope="scope">
                        <span>{{scope.row.quantityAfterWarranty+'('+scope.row.quantityAfterWarrantys+')'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="创建时间" sortable width="150px">
                </el-table-column>
                <el-table-column prop="name" label="联系人" width="80px">
                </el-table-column>
                <el-table-column prop="telephone" label="电话" width="120px">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
            <!-- 详情页 -->
            <el-drawer :visible.sync="drawer" :with-header="false" size="45%" :modal="false">
                <div class="drawerCon" v-for="(item,index) in currentTableData" ::key="index">
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <div style="display:flex;">
                                <div class="drawerCon_logo">
                                    <img :src="item.imgUrl" alt="溜走了...">
                                </div>
                                <div class="drawerCon_logoRight">
                                    <div style="font-size: 14px;margin: 10px;font-weight: 700;">{{item.supplier}}</div>
                                    <div style="font-size: 12px;margin-left: 10px;color:rgba(128, 128, 128, 0.699);">
                                        创建时间：{{item.time}}&nbsp&nbsp&nbsp创建用户：{{item.createUser}}</div>
                                </div>
                            </div>
                            <p>地&nbsp&nbsp&nbsp址：{{item.address}}</p>
                            <p>网&nbsp&nbsp&nbsp址：{{item.website}}</p>
                            <p>联系人：{{item.name}}</p>
                            <p>电&nbsp&nbsp&nbsp话：{{item.telephone}}</p>
                        </el-col>
                        <el-col :span="8">
                            <div id="myEcharts" style="width: 200px; height:200px;"></div>
                        </el-col>
                    </el-row>
                    <div style="display:flex;">
                        <div :class="[briefIntroductionShow?'briefIntroductionCon':'briefIntroductionConAction']">
                            简&nbsp&nbsp&nbsp介：{{item.briefIntroduction}}
                        </div>
                        <div class="zhankaiBtn" @click="briefIntroductionShow = !briefIntroductionShow">展开
                        </div>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content">
                                <div class="p1">{{item.num}}</div>
                                <div class="p2">供应设备数量</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content">
                                <div class="p1">{{item.proportion}}</div>
                                <div class="p2">供应设备占比</div>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content">
                                <div class="p1">{{item.ranking}}</div>
                                <div class="p2">供应量排名</div>
                            </div>
                        </el-col>
                    </el-row>
                    <div style="display: flex;justify-content: space-between;">
                        <div style="font-weight: 800;"><span style="font-size:18px;color:#3979FD">·</span>&nbsp供应设备明细
                        </div>
                        <div
                            style="width: 60px;height: 24px;background: #FFFFFF;border: 1px solid #E3E5E9;border-radius: 3px;
                        font-size: 12px;font-weight: 400;color: #7F8694;text-align: center;line-height: 22px; cursor: pointer;">
                            生成报告</div>
                    </div>
                    <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                        <div>
                            质保状态
                            <el-select v-model="value" placeholder="请选择" size="mini" style="width:100px">
                                <el-option v-for="item in options" :key="item.value" :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div style="display: flex;font-size: 12px;color: #707276;margin-top: 4px;">
                            <span>供应设备共<a style="color:#3979FD;font-size: 14px;">{{item.num}}</a>套</span>
                            <span>，其中处于质保期产品<a
                                    style="color:#3979FD;font-size: 14px;">{{item.warrantyQuantity}}</a>套</span>
                            <span>，过质保期产品<a
                                    style="color:#3979FD;font-size: 14px;">{{item.quantityAfterWarranty}}</a>套</span>
                        </div>
                    </div>
                    <el-table :data="miniTableData" border style="width: 100%;margin-top: 10px;"
                        :header-cell-style="{background:'#f4f3f9'}">
                        <el-table-column prop="name" label="设备名称" width="140px">
                        </el-table-column>
                        <el-table-column prop="pumpRoom" label="所属泵房" width="140px">
                        </el-table-column>
                        <el-table-column label="价格" width="80px">
                            <template slot-scope="scope">
                                <span>{{'￥'+scope.row.price}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="address" label="地址">
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                        :current-page="currentPage1" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </el-drawer>
        </div>
    </div>
</body>

</html>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [],
                currentTableData: {},
                miniTableData: [],
                multipleSelection: [],
                currentPage: 1,
                currentPage1: 1,
                dialogVisible1: false,
                drawer: false,
                briefIntroductionShow: true,
                ruleForm: {
                    supplier: '',
                    type: '',
                    name: '',
                    telephone: '',
                    website: '',
                    address: '',
                    imageUrl: '',
                    briefIntroduction: ''
                },
                miniTableData: [],
                options: [{
                    value: '全部'
                }, {
                    value: '质保中'
                }, {
                    value: '过质保'
                }],
                value: '全部',
                rules: {
                    supplier: [{
                        required: true,
                        message: '请输入供应商名称',
                        trigger: 'blur'
                    }],
                    type: [{
                        required: true,
                        message: '请选择企业类型',
                        trigger: 'change'
                    }],
                    name: [{
                        required: true,
                        message: '请输入联系人',
                        trigger: 'blur'
                    }],
                    telephone: [{
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    }],
                }
            }
        },
        created() {},
        mounted() {
            this.getTableData()
        },
        updated() {},
        watch: {},
        methods: {
            //复选框选中
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 获取表格数据
            getTableData() {
                axios.get("../json/supplierManagement.json").then(res => {
                    this.tableData = res.data.result.tableData
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleSizeChange1(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange1(val) {
                console.log(`当前页: ${val}`);
            },
            handleAvatarSuccess(res, file) {
                this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            openDrawer(data) {
                console.log(data);
                this.drawer = true;
                this.currentTableData = {
                    data
                };
                this.miniTableData = data.miniTableData;
                this.getEcharts()
            },
            upd(){
            },
            del(){
                console.log(this.multipleSelection);
                // for (let i = this.multipleSelection.length; i <=0; i--) {
                //     this.tableData.splice(this.multipleSelection[i],1)
                // }
            },
            getEcharts() {
                this.$nextTick(() => {
                    var obj = echarts.init(document.getElementById('myEcharts'))
                    const chartObserver = new ResizeObserver(() => {
                        obj.resize()
                    })
                    chartObserver.observe(document.getElementById('myEcharts'))
                    var option = {
                        radar: {
                            // shape: 'circle',
                            indicator: [{
                                    name: '价格',
                                    max: 1000
                                },
                                {
                                    name: '质保',
                                    max: 1000
                                },
                                {
                                    name: '服务',
                                    max: 1000
                                },
                                {
                                    name: '质量',
                                    max: 1000
                                },
                                {
                                    name: '节能',
                                    max: 1000
                                },
                                {
                                    name: '数量',
                                    max: 1000
                                }
                            ],
                            splitNumber: 1, // 雷达图圈数设置
                            radius: 50, //缩放
                            center: ['50%', '50%'], //位置
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: 'rgba(131,141,158,.3)', // 设置网格的颜色
                                },
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(131,141,158,.4)',// 设置雷达图中间射线的颜色
                                },
                            },
                        },
                        series: [{
                            type: 'radar',
                            data: [{
                                value: [500, 600, 200, 700, 600, 400],
                                symbol: "none", //去掉折线上的小圆点
                                areaStyle: {
                                    color: "rgba(64,158,255,.5)" //雷达覆盖区域背景颜色
                                },
                            }]
                        }]

                    }
                    obj.setOption(option)
                })
            }
        }
    })
</script>